<template>
	<view>
		<nav-bar></nav-bar>
		<view style="margin-top:18px;padding: 0 22px;">
			<view class="flex flex-row uni-title">{{ project.projectname }}</view>
			<view class="flex flex-row" style="margin-top:17px;">
				<view class="flex-1">
					<view class="flex justify-center items-center uni-list-title-1">{{ project.shangji }}</view>
				</view>
				<view
					style="font-size: 16px;font-weight: 400;color: rgb(141, 141, 141);overflow: hidden;white-space: nowrap;width: 88px;">
					{{ project.createTime }}</view>
			</view>
		</view>

		<view class="uni-list-title">项目参数</view>
		<view style="margin-top:18px;padding: 0 22px;">
			<view class="flex flex-row uni-list-title-1-1">
				<view class="uni-list-title-1-2">意向区域：</view>
				<view class="flex-1 uni-list-title-1-2-1">{{ project.provincename }} {{ project.cityname }}</view>
			</view>
			<view class="flex flex-row uni-list-title-1-1">
				<view class="uni-list-title-1-2">落地时间：</view>
				<view class="flex-1 uni-list-title-1-2-1">{{ project.luodishijian }}</view>
			</view>
			<view class="flex flex-row uni-list-title-1-1">
				<view class="uni-list-title-1-2">需求类型：</view>
				<view class="flex-1 uni-list-title-1-2-1">{{ project.xiangmuleixing }}</view>
			</view>
			<view class="flex flex-row uni-list-title-1-1">
				<view class="uni-list-title-1-2">对象级别：</view>
				<view class="flex-1 uni-list-title-1-2-1">{{ project.duixiangjibie }}</view>
			</view>
			<view class="flex flex-row uni-list-title-1-1">
				<view class="uni-list-title-1-2">注册资本：</view>
				<view class="flex-1 uni-list-title-1-2-1">{{ project.zhuceziben }} 万元</view>
			</view>
			<view class="flex flex-row uni-list-title-1-1">
				<view class="uni-list-title-1-2">投资预计：</view>
				<view class="flex-1 uni-list-title-1-2-1">{{ project.touziyuji }} 万元</view>
			</view>
			<view class="flex flex-row uni-list-title-1-1">
				<view class="uni-list-title-1-2">产值预计：</view>
				<view class="flex-1 uni-list-title-1-2-1">{{ project.chanzhiyuji }} 万元</view>
			</view>
			<view class="flex flex-row uni-list-title-1-1">
				<view class="uni-list-title-1-2">税收预计：</view>
				<view class="flex-1 uni-list-title-1-2-1">{{ project.shuishouyuji }} 万元</view>
			</view>
			<view class="flex flex-row uni-list-title-1-1">
				<view class="uni-list-title-1-2">就业岗位：</view>
				<view class="flex-1 uni-list-title-1-2-1">{{ project.jiuyerenshu }} 人</view>
			</view>
			<view class="flex flex-row uni-list-title-1-1">
				<view class="uni-list-title-1-2">产业类型：</view>
				<view class="flex-1 flex flex-row uni-list-title-1-2-1">
					<view v-for="(item, index) in project.biaoqianArr" :key="index"
						style="font-size: 10px;font-family: PingFangHK-Regular, PingFangHK;font-weight: 400;color: #FE7743;padding-left: 0.125rem;padding-right: 0.125rem;margin-right: 0.375rem;border: 1px solid #FE7743;">
						{{ item }}
					</view>
				</view>
			</view>
		</view>

		<view class="uni-list-title">项目介绍</view>
		<view class="uni-list-title-p" v-html="project.details"></view>

		<view class="uni-list-title">项目需求</view>
		<view class="uni-list-title-p" v-html="project.xiangmuxuqiu"></view>

		<view class="uni-list-title">项目优势</view>
		<view class="uni-list-title-p" v-html="project.xiangmuyoushi"></view>

		<view style="margin-bottom: 50px;">.</view>

		<view class="flex flex-row" style="width:100%;position:fixed;bottom:0;left:0;right:0;">
			<view class="flex-1 flex justify-center items-center"
				style="background: #F9FAF9;font-size: 8px;font-weight: 600;color: #5D606A;">
				联系人：{{ project.lianxifangshi }}
			</view>
			<view class="flex-1 flex justify-center items-center"
				style="background: #F9FAF9;font-size: 8px;font-weight: 600;color: #5D606A;">
				联系电话：{{ project.xiangmudianhua }}
			</view>
			<view class="flex justify-center items-center"
				style="width: 85px;height: 37px;background: #ED1A23;font-size: 12px;font-weight: 400;color: #FFFFFF;">
				查看名片</view>
			<view class="flex justify-center items-center"
				style="width: 85px;height: 37px;background: #137EC1;font-size: 12px;font-weight: 400;color: #FFFFFF;">
				免费解锁项目</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: 0,
				project: {}
			};
		},
		onLoad(option) {
			this.id = option.id;
			this.getProjectDetail(option.id);
		},
		methods: {
			getProjectDetail() {
				let that = this;
				this.$apiCall.request(
					'get',
					`/project/${this.id}`, {}, {
						sucCb(data) {
							that.project = data.data;
							let str = that.project.projectname ? '' + that.project.projectname : '';
							str = str + '·' + '第1园区';
							uni.setNavigationBarTitle({
								title: str
							});
						}
					}
				);
			}
		}
	};
</script>

<style>
	.uni-title {
		font-size: 22px;
		font-weight: 700;
		color: #000000;
		margin: 20px 0px;
	}

	.uni-list-title {
		margin-top: 30px;
		padding: 0 21px;
		margin-top: 20px;
		font-size: 16px;
		font-weight: 700;
		color: #5e6069;
	}

	.uni-list-title-p {
		margin-top: 21px;
		padding: 0 21px;
		font-size: 14px;
		font-weight: 400;
		color: #000000;
	}

	.uni-list-title-1 {
		padding: 0 10px;
		font-size: 15px;
		font-weight: 700;
		width: 80px;
		height: 31px;
		color: rgb(234 228 228);
		background: rgb(255 80 13);
		border-radius: 20px;
		margin-top: 0px;
	}

	.uni-list-title-1-1 {
		margin-top: 12px;
	}

	.uni-list-title-1-2 {
		font-size: 15px;
		font-weight: 500;
		color: #9c9c9c;
	}

	.uni-list-title-1-2-1 {
		font-size: 14px;
		font-weight: 400;
		color: #000000;
	}
</style>